<template>
  <div class="side__container">
    <n-tabs v-model:value="selectTabs" type="segment" @update:value="handleTabsChange">
      <n-tab-pane name="task" tab="任务列表">
        <n-scrollbar style="max-height: 100%">
          <div
            v-for="(item,index) in taskList"
            :key="index"
            class="card__item task__item"
            :class="item.id === selectTask.id ? 'is--checked' : ''"
            @click="handleSelect(item,'task')"
          >
            <p v-if="item.type === 2"><span class="is--urgent">应急</span></p>
            <p v-for="(cItem,cIndex) in cardList" :key="cIndex">
              <span class="item__label">{{ cItem.label }}</span>
              <n-ellipsis style="max-width: 200px">{{ item[cItem.key] }}</n-ellipsis>
            </p>
            <p class="item__button">
              <n-button v-if="item.status === 5" color="#00b42a" text-color="#ffffff" size="small" @click.stop="handleExecute(item,item.type)">
                {{ item.type === 2 ? '前往' : '立即执行' }}
              </n-button>
            </p>
            <div class="item__status">
              <n-tag :color="getTags(item.status).color">{{ getTags(item.status).label }}</n-tag>
            </div>
          </div>
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane v-if="permissionList.includes('home:tabs:warning')" name="ques" tab="应急事故">
        <n-scrollbar style="max-height: 100%">
          <template v-if="isCreate">
            <CreatePanel v-bind="$attrs" @close="handleSave" />
          </template>
          <template v-if="getQuesList.length">
            <div
              v-for="(item,index) in getQuesList"
              :key="index"
              class="card__item ques__item"
              :class="item.id === selectQues.id ? 'is--checked' : ''"
              @click="handleSelect(item,'ques')"
            >
              <p v-for="(cItem,cIndex) in quesList" :key="cIndex">
                <span class="item__label">{{ cItem.label }}</span>
                <n-ellipsis style="max-width: 200px">{{ item[cItem.key] }}</n-ellipsis>
              </p>
              <p class="item__button">
                <n-button
                  v-if="item.status === 1"
                  color="#fdcdc5"
                  text-color="#f53f3f"
                  size="small"
                  @click.stop="haneleIgnore(item.id)"
                >忽略</n-button>
              </p>
              <div class="item__status">
                <n-tag :color="getTags(item.status,1).color">{{ getTags(item.status,1).label }}</n-tag>
              </div>
            </div>
          </template>
          <template v-if="!getQuesList.length && !isCreate">
            <div class="is--empty">
              <p>当前无事故</p>
            </div>
          </template>

          <div v-if="!isCreate" class="tabs__button">
            <n-button type="success" color="#0e42d2" @click="handleCreate">创建事故</n-button>
          </div>
        </n-scrollbar>
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, watch, nextTick } from 'vue'
import { usePermissionStore } from '@/store/modules/permission.js'
import { useGlobalWarming } from '@/store/modules/globalWarming'
import { fetchInspection, executeTask } from '@/api/dashboard/index.js'
import { accidentForward } from '@/api/accident/index.js'
import { accidentIgnore } from '@/api/emergency/index.js'
import CreatePanel from './CreatePanel.vue'
import { getAirList } from '@/api/task/index.js'
export default defineComponent({
  name: 'SidePanel',
  components: { CreatePanel },
  props: {
    quesList: {
      type: Array,
      default: () => []
    }
  },
  emits: [{ 'selected': null }, 'ignore'],
  setup(props, { emit }) {
    const permissionStore = usePermissionStore()
    const globalWarning = useGlobalWarming()
    const data = reactive({
      selectTabs: 'task',
      permissionList: permissionStore.accessPermissionCodes,
      airList: []
    })

    const task = reactive({
      selectTask: {},
      cardList: [
        { label: '任务名称：', key: 'name' },
        { label: '部门名称：', key: 'deptName' },
        { label: '路线名称：', key: 'inspectionLineName' },
        { label: '机场名称：', key: 'airportName' },
        { label: '巡检时间：', key: 'inspectionTime' }
      ],
      taskList: [],
      tagList: {
        5: {
          color: { color: 'transparent', textColor: '#ff7d00', borderColor: '#ff7d00' },
          label: '待飞行'
        },
        6: {
          color: { color: 'transparent', textColor: '#ff7d00', borderColor: '#ff7d00' },
          label: '准备中'
        },
        10: {
          color: { color: 'transparent', textColor: '#0fc6c2', borderColor: '#0fc6c2' },
          label: '飞行中'
        }
      }
    })

    const ques = reactive({
      selectQues: {},
      quesList: [
        { label: '事故类型：', key: 'questionName' },
        { label: '事故航道：', key: 'legName' },
        { label: '负责部门：', key: 'deptName' },
        { label: '发生时间：', key: 'formatTime' }
      ],
      tagList: {
        1: {
          color: { color: 'transparent', textColor: '#f53f3f', borderColor: '#f53f3f' },
          label: '未处理'
        },
        2: {
          color: { color: 'transparent', textColor: '#00b42a', borderColor: '#00b42a' },
          label: '处理中'
        },
        3: {
          color: { color: 'transparent', textColor: '#00b42a', borderColor: '#0fc6c2' },
          label: '已忽略'
        },
        4: {
          color: { color: 'transparent', textColor: '#00b42a', borderColor: '#0fc6c2' },
          label: '已处理'
        },
        5: {
          color: { color: 'transparent', textColor: '#00b42a', borderColor: '#0fc6c2' },
          label: '已完成'
        }
      },
      isCreate: false
    })

    watch(() => globalWarning.getSkip, (val) => {
      if (val) {
        nextTick(() => {
          if (data.selectTabs === 'task' && data.permissionList.includes('home:tabs:warning')) {
            data.selectTabs = 'ques'
            handleTabsChange('ques')
          }
          globalWarning.setSkip(false)
        })
      }
    }, { immediate: true })

    const queryTaskList = async() => {
      const res = await fetchInspection()
      task.taskList = res?.data || []
      task.taskList.forEach((item) => {
        const list = data.airList.find((cItem) => cItem.id === item.airportId)
        item.airportName = list?.name || ''
      })
      if (Object.keys(task.selectTask).length) {
        const list = task.taskList.find((item) => item.id === task.selectTask.id)
        if (list) {
          task.selectTask = { ...list }
          emit('selected', { tabType: 'task', refresh: true, ...list })
        } else {
          task.selectTask = {}
          emit('selected', { tabType: 'task' })
        }
      }
    }

    /**
     * @description: 获取应急数据
     * @param {*} computed
     * @return {*}
     */
    const getQuesList = computed(() => {
      return props.quesList
    })

    /**
     * @description: 获取标签信息
     * @param {*} status 状态
     * @return {*}
     */
    const getTags = computed(() => {
      return (status, type = 0) => {
        if (type === 0) {
          return task.tagList[status]
        } else {
          return ques.tagList[status]
        }
      }
    })

    /**
     * @description: tabs选项变更
     * @return {*}
     */
    const handleTabsChange = (tabType) => {
      ques.selectQues = {}
      task.selectTask = {}
      if (tabType === 'task') {
        ques.isCreate = false
      }
      emit('selected', { tabType })
    }

    const handleSelect = (info, tabType) => {
      switch (tabType) {
        case 'task':
          task.selectTask = info
          ques.selectQues = {}
          emit('selected', { tabType: 'task', ...info })
          break
        case 'ques':
          if (ques.isCreate) {
            $message.info('请先保存事故信息')
          } else {
            task.selectTask = {}
            ques.selectQues = info
            emit('selected', { tabType: 'ques', ...info })
          }

          break
        default:
          break
      }
    }

    /**
     * @description: 立即执行
     * @param {*} id
     * @return {*}
     */
    const handleExecute = async(info, type) => {
      if (type === 2) {
        const params = {
          accidentId: info.accidentId,
          droneForwardType: 3
        }
        const res = await accidentForward(params)
        if (res.code === 0) {
          queryTaskList()
        }
      } else {
        const res = await executeTask(info.id)
        if (res.code === 0) {
          queryTaskList()
        }
      }
    }

    const haneleIgnore = async(id) => {
      await accidentIgnore(id)
      emit('ignore')
    }

    const handleSave = () => {
      ques.isCreate = false
    }

    const handleCreate = () => {
      ques.isCreate = !ques.isCreate
    }

    const getAirportList = (async() => {
      const res = await getAirList()
      data.airList = res.data.records
    })()

    return {
      ...toRefs(data),
      ...toRefs(task),
      ...toRefs(ques),
      queryTaskList,
      getAirportList,
      getTags,
      getQuesList,
      handleTabsChange,
      handleSelect,
      handleExecute,
      haneleIgnore,
      handleSave,
      handleCreate
    }
  }
})

</script>
<style scoped lang='scss'>
.side__container{
  height: 100%;
  background: rgba(39, 39, 39, 1);
  padding: 15px 10px;
}
::v-deep(.n-tabs){
  height: 100%;
  .n-tab-pane{
    max-height: calc(100% - 24px);
  }
  .n-tabs-nav{
    height: 24px;
  }
  .n-tabs-rail{
    background: transparent;
    // .n-tabs-tab-wrapper{
    //   flex-grow: inherit;
    // }
    .n-tabs-tab-wrapper{
      height: 24px;
      .n-tabs-tab{
        padding: 0;
        height: 24px;
      }
      .n-tabs-tab__label{
        font-size: 16px;
      }
      .n-tabs-tab--active{
        color: rgba(22, 93, 255, 1);
        background-color: transparent;
        .n-tabs-tab__label{
          color: rgba(22, 93, 255, 1);
        }
        &[data-name='ques']{
          .n-tabs-tab__label{
            color: rgba(245, 63, 63, 1);
          }
        }
      }
    }
  }

  .n-tabs-tab__label{
    padding-left: 10px;
    padding-right: 10px;
    color: rgba(255,255,255,1);
  }
  .card__item{
    padding: 10px;
    // font-weight: bold;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    border-top: 5px solid transparent;
    color: rgb(26, 16, 16);
    background: rgba(69, 69, 69, 0.5);
    &.is--checked{
      // border-color: rgba(22, 93, 255, 1);
      border-top-color: rgba(22, 93, 255, 1);
    }
    &:last-child{
      margin-bottom: 0;
    }
    &.task__item{
      color: rgba(255, 255, 255, 1);
      background: rgba(69, 69, 69, 0.5);
      &.is--checked{
        border-color: rgba(22, 93, 255, 1);
      }
    }
    &.ques__item{
      color: rgba(255, 255, 255, 1);
      background: rgba(69, 69, 69, 0.5);
      // color: rgba(245, 63, 63, 1);
      // background: rgba(255, 236, 232, 1);
      &.is--checked{
        // border-color: rgba(245, 63, 63, 1);
        border-top-color: rgba(203, 38, 52, 1);
      }
    }
    .n-ellipsis{
      margin-left: 10px;
    }
    .is--urgent{
      // margin-left: 15px;
      color: rgba(245, 63, 63, 1);
      &::before{
        content: "·";
      }
    }
    .item__status{
      position: absolute;
      right: 5px;
      top: 5px;
      width: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .n-tag{
        height: 24px;
        font-size: 14px;
        margin-bottom: 5px;
      }
      .n-button{
        height: 24px;
      }
    }
    .item__button{
      margin: 10px 0 0;
      text-align: center;
    }
  }

  .is--empty{
    font-size: 16px;
    color: rgba(255,255,255,1);
    font-weight: bold;
    text-align: center;
    margin: 350px auto 20px;
  }

  .tabs__button{
    text-align: center;
  }
}
</style>
